<template>
  <el-dialog
    @close="cancel"
    :visible.sync="dialog"
    width="660px"
    class="dialogClass"
  >
    <!-- 标题 -->
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <div class="modalCard">
      <div class="titlefangkuai">
        <div class="fangkuai"></div>
        <div class="Header">业务协同基本信息</div>
      </div>

      <!-- 详情 -->
      <el-descriptions
        class="descriptions"
        label-width="120px"
        :column="1"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="申请单位">{{
          this.formData.deptName
        }}</el-descriptions-item>
        <el-descriptions-item label="协同案件">{{
          this.formData.caseName
        }}</el-descriptions-item>
        <el-descriptions-item label="协同任务">{{
          this.formData.taskName
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{
          this.formData.applyTime
        }}</el-descriptions-item>
        <el-descriptions-item label="申请事由">{{
          this.formData.applyReason
        }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="modalCard" v-show="formData.collaborationInfo != null">
      <el-divider> </el-divider>
      <div class="titlefangkuai">
        <div class="fangkuai"></div>
        <div class="Header">业务协同处置信息</div>
      </div>

      <!-- 详情 -->
      <el-descriptions
        class="descriptions"
        label-width="120px"
        :column="1"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="处置意见">{{
          this.formData.collaborationInfo
        }}</el-descriptions-item></el-descriptions
      >
    </div>
    <!-- 下边按钮 -->
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getInfo } from "@/api/collaboration/collaboration.js";
export default {
  props: ["dialog", "id"],
  data() {
    return {
      title: "业务协同详情",
      formData: {},
    };
  },
  methods: {
    // 取消方法
    cancel() {
      this.$emit("update:dialog", false);
    },
  },

  watch: {
    dialog: {
      handler(value) {
        if ((value = true)) {
          getInfo(this.id).then((res) => {
            this.formData = res.data;
            console.log(
              "this.formData.collaborationInfo :>> ",
              this.formData.collaborationInfo
            );
          });
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式
::v-deep .label {
  width: 80px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}
::v-deep .content {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
::v-deep .el-descriptions-item__container {
  margin-bottom: 15px;
}
::v-deep.el-select {
  width: 100%;
}
.dialogClass{
 ::v-deep .el-dialog{
  top: 80px;
  }
}
</style>